<template>
  <ul class="list" ref="wrapper">
    <li
      class="item"
      v-for=" (item,index)  of list"
      :class='{change:index==data}'
      :key="item"
      :ref='item'
      @click="info"
      @touchstart = 'start'
      @touchmove = 'move'
      @touchend = 'end'
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
import bus from '../../../bus/bus'
import Bscroll from "better-scroll";
export default {
  name: "Alphabet",
  props: {
    cities: Object,
  },
  data(){
    return{
      touchStart:false,
      data:0,
    }
  },
  methods: {
    info(e) {
      this.$emit("change", e.target.innerText); //发送
    },
    start(){
      this.touchStart = true
    },
    move(e){
      if(this.touchStart){
        // 计算出A距离顶部的距离
        let startY = this.$refs['A'][0].offsetTop;
        let touchY = e.touches[0].clientY -116;
        let index =  Math.floor((touchY-startY)/20)
        if(index>=0 && index<this.list.length){
          this.$emit('change',this.list[index])
          this.data=index
        }
      }
    },
    end(){
      this.touchStart = false
    }
  },
  computed:{
    list(){
      let list = [];
      for(let i in this.cities){
        list.push(i)
      }
      return list
    }
  },
  mounted() {
    bus.$on('item',(data)=>{ 
      // console.log(data)
      this.data = data
        var arr = [];
        var  navMenu = this.$refs['wrapper']
        for(var i=0;i<navMenu.innerText.length;i++){
          arr.push(navMenu.innerText[i])
        }
        navMenu.childNodes.forEach(val=>{
          if(val.innerText.trim() == data.trim()){
            // console.log(1111)
            val.style.color='red'
          }else{
            val.style.color='#000'
          }
        })
      })
  },
};
</script>

<style lang="stylus" scoped>

.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 2.46rem;
  right: 0;
  bottom: 0;
  width: 0.44rem;

  // background :red
  .item {
    line-height: 0.4rem;
    text-align: center;
    // color: $bgColor;
  }
}
.change{
  color:red  !important  ;
}
</style>